<template>
    <div>
        <search
        ref="mysearch"
        @doReset="doReset"
        @doQuery="doRefresh"
        :ruleform="ruleForm"
        >
            <template slot="top">
                <el-form-item label="系统名称：" prop="systemId">
                    <el-select v-model="ruleForm.systemId" @change="selectSysChanged">
                        <el-option :value='0' label="全部"></el-option>
                        <el-option
                        v-for="(item,index) in systemList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="环境名称：" prop="environmentId">
                    <el-select v-model="ruleForm.environmentId" @change="selectEnvChanged">
                        <el-option :value="0" label="全部"></el-option>
                        <el-option
                        v-for="(item,index) in envList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务名称：" prop="serviceId">
                    <el-select v-model="ruleForm.serviceId">
                        <el-option :value="0" label="全部"></el-option>
                        <el-option
                        v-for="(item,index) in serverList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间：" prop="startTime" class="dateTime">
                    <el-date-picker
                        v-model="ruleForm.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        >
                    </el-date-picker>
                </el-form-item>
            </template>
            <div slot="foot"></div>
        </search>
        <mytable ref="mytable"
            :config="tableconfig"
           >
            <div slot="mytablebody"></div>
        </mytable>
    </div>
</template>
<script>
import search from '@/components/search.vue';
import mytable from '@/components/table.vue';
import {userLoginLog,systemFind,environmentData,} from '@/api/log';
import { changeParam } from "@/utils/helper";
import { getServiceData } from "@/api/configuration/serviceApi";
export default{
    components:{
        search,
        mytable,
    },
    data(){
        return{
            ruleForm:{
                systemId:0,
                serviceId:0,
                environmentId:0,
                beginDate:'',
                endDate:'',
                time:[],
                pageNo:1,
                pageSize:20,
            },
            serverList:[],
            tableconfig: {
                loading: false,
                isselection: false,
                ispagination: true,
                tabledata: [
                ],
                isindex: true,
                thead: [
                { sort: null, label: "系统名称",prop: "systemName", },
                { sort: null, label: "环境名称", prop: "environmentName" },
                { sort: null, label: "服务名称",prop: "serviceName",},
                { sort: null, label: "日期", prop: "theDate" },
                { sort: null, label: "登录次数", prop: "loginCount" },
                { sort: null, label: "登录账号数量", prop: "loginUsernameCount" },
                ],
                currentpage: 1,
                pagesize: 0,
                total: 0,
            },
            systemList:[],
            envList:[],
            serviceList:[],
        }
    },
    methods:{
          //级联关系
        selectSysChanged(){
            const { systemId } = this.ruleForm;
            console.log(this.systemId,'systemIdsystemId');
            this.getenvDataList(systemId);
            this.getserverDataList('',systemId);
            this.ruleForm.environmentId = 0;
            this.ruleForm.serviceId = 0;
        },
        selectEnvChanged() {
            const { environmentId } = this.ruleForm;
            const { systemId } = this.ruleForm;
            console.log(environmentId,systemId,'environmentId,systemId');
            this.ruleForm.serviceId = 0;
            this.getserverDataList(environmentId,systemId);
        },
        // 重置搜索
        doReset() {
            console.log(Object.keys(this.ruleForm).slice(0, -3), "this.ruleForm");
            Object.keys(this.ruleForm).slice(0, -3).map((x) => {
                this.ruleForm[x] = 0;
            });
            this.ruleForm.time = [];
            console.log(this.ruleForm, "this.ruleForm.pageSize");
            // this.$message({
            //     message: "已重置",
            //     type: "success",
            // });
            this.getserverDataList();
            this.getenvDataList();
            this.doRefresh();
        },
        // 刷新
        doRefresh() {
            //页码从第一页开始
            this.tableconfig.currentpage = 1;
            this.ruleForm.pageNo = 1;
            //表格回到顶部
            this.$refs.mytable.$emit("handleGoTop");
            this.doQuery();
        },
        async doQuery() {
        // 获取表格
            this.tableconfig.loading = true;
            this.tableconfig.currentpage = this.ruleForm.pageNo;
            this.tableconfig.pagesize = this.ruleForm.pageSize;
            this.ruleForm.beginDate = this.ruleForm.time[0];
            this.ruleForm.endDate = this.ruleForm.time[1];
            let data1 = await userLoginLog(this.ruleForm);
            if (data1.success) {
                this.tableconfig.total = data1.result.count;
                this.tableconfig.tabledata = data1.result.userLoginLogPojoList;
            }
            this.tableconfig.loading = false;
        },
         // 页码数更新
        handleSizeChange(val) {
            this.ruleForm.pageNo = 1;
            this.ruleForm.pageSize = val;
            this.doQuery();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        // 当前页码更新
        handleCurrentChange(val) {
            this.ruleForm.pageNo = val;
            console.log(this.ruleForm.pageNo,'this.tableconfig.currentpage');
            this.doQuery();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        getDataList() {
            let params = {
                name: "",
                pageNo: 1,
                pageSize: 99999,
            };
            systemFind(changeParam({ ...params })).then((res) => {
                if (res.success) {
                this.systemList = res.result.list;
                }
            });
        },
        getenvDataList(systemId){
            let envParams = {
                systemId: systemId,
                systemName: "",
                name: "",
                pageNo: 1,
                pageSize: 99999,
            };
            environmentData(changeParam({ ...envParams })).then((res) => {
                if (res.success) {
                this.envList = res.result;
                }
            });
        },
        getserverDataList(environmentId,systemId){
            const params = { environmentId,systemId, pageNo: 1, pageSize: 9999 };
            getServiceData(changeParam({ ...params })).then((res) => {
                if (res.success) {
                this.serverList = res.result.list;
                }
            });
        },
        },
    created() {
        this.doQuery();
        this.getDataList();
        this.getserverDataList();
        this.getenvDataList();
    },
}
</script>
<style lang="scss" scoped>
    
</style>